


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Promise初体验
    <!-- 
        Promise 是ES6异步编程的一种解决方案,解决回调地狱问题。
        许诺器，本质是构造函数，学名叫class 可以 new 
        Promise内部通常放的是将来要执行的异步代码，而这些异步代码执行完成后会有两种结果：成功或失败。
        因此Promise有三种状态：原理
​	     pending(初始状态 运行中) 、fullfill/resolve(成功状态)、rejecte(失败状态)。

        当在Promise内部执行了resolve()成功时的回调方法则执行定义在then()中的成功时的回调函数，
        并将Promise的pending初始状态转换fullfill/resolve成功状态；

        当在Promise内部执行了resolve()成功时的回调方法则执行定义在then()中
        第二个参数的失败时的回调函数或定义在catch()中失败时的回调函数，
        并将Promise的pending初始状态转换reject失败状态。 
     -->
       
    <script src="../jquery.js"></script>
    <script>

       let p1 = new Promise((resolve,reject)=>{
             //异步代码   resolve成功   reject失败
             $.ajax({
                url:"../text/arr.txt",
                dataType:"json",
                success(res){
                    resolve(res)
                },
                error(err){
                    reject(err)
                }
             })
       })

    //    p1.then(res=>{
    //         console.log(res); 
    //    }).catch(err=>{
    //         console.log(err);
            
    //    })

       let p2 = new Promise((resolve,reject)=>{
             //异步代码   resolve成功   reject失败
             $.ajax({
                url:"../text/json.txt",
                dataType:"json",
                success(res){
                    resolve(res)
                },
                error(err){
                    reject(err)
                }
             })
       })

    //    p2.then(res=>{
    //         console.log(res); 
    //    }).catch(err=>{
    //         console.log(err);
            
    //    })
       let p3 = new Promise((resolve,reject)=>{
             //异步代码   resolve成功   reject失败
             $.ajax({
                url:"../text/num.txt",
                dataType:"json",
                success(res){
                    resolve(res)
                },
                error(err){
                    reject(err)
                }
             })
       })
        
    //    p3.then(res=>{
    //         console.log(res); 
    //    }).catch(err=>{
    //         console.log(err);
            
    //    })

    //    console.log(p1);
    //    console.log(p2);
    //    console.log(p3);
       
    // 所有的 异步操作都成功后，在去执行一个动作
    // 缺陷：只要一个不成功 就不能往后执行
    // Promise.all如何防止某个promise失败而使整个promise失败 1:Promise.allSettled()  2:可以在每个 Promise 上应用一个 .catch，将其转换为一个始终返回成功状态的 Promise

    //    Promise.all([p1,p2,p3]).then(res=>{
    //         console.log(res);
    //         const [res1,res2,res3] = res;
    //         console.log(res1+"resolved1");
    //         console.log(res2+"resolved2");
    //         console.log(res3+"resolved3");
    //    },(err)=>{
    //         console.log(err+ "失败");   
    //    })



    //    .race()方法  谁先来执行谁
       Promise.race([p1,p2,p3]).then(res=>{
            console.log(res);
            // const [res1,res2,res3] = res;
            // console.log(res1+"resolved1");
            // console.log(res2+"resolved2");
            // console.log(res3+"resolved3");
       },(err)=>{
            console.log(err+ "失败");   
       })


    //    Promise.allSettled([p1,p2,p3]).then(res=>{
    //         console.log(res);
    //         const [res1,res2,res3] = res;
    //         console.log(res1+"resolved1");
    //         console.log(res2+"resolved2");
    //         console.log(res3+"resolved3");
    //    },(err)=>{
    //         console.log(err+ "失败");   
    //    })

    //    Promise.any([p1,p2,p3]).then(res=>{
    //         console.log(res);//p1
            
    //         // const [res1,res2,res3] = res;
    //         // console.log(res1+"resolved1");
    //         // console.log(res2+"resolved2");
    //         // console.log(res3+"resolved3");
    //    },(err)=>{
    //         console.log(err+ "失败");   
    //    })


    </script>
</body>
</html>